<template>
  <div class="params-container">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/home/params' }">
        分类参数
      </el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-alert title="注意: 只允许为第三级分类设置参数 !" type="warning" :closable='false'>
      </el-alert>
      <!-- 级联选择器 -->
      <div class="selectCategory">
        <span>选择商品分类: </span>
        <el-cascader v-model="selectedIds" :options="categoryList" :props="props" @change="handleChange"></el-cascader>
      </div>
      <!-- tab -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="动态参数" name="many">
          <el-button type='primary' :disabled='isDisable' style='marginBottom:20px' @click='dialogVisible = true'>添加参数</el-button>
          <el-table :data="manyData" style="width: 100%" border stripe>
            <!-- 展开列 -->
            <el-table-column type='expand'>
              <template slot-scope="scope">
                <!-- 参数 -->
                <el-tag closable v-for="(item,index) in scope.row.attr_vals" :key='index'>{{item}}</el-tag>
                <!-- 添加参数 -->
                <el-input class="input-new-tag" v-if="scope.row.inputVisible" v-model="scope.row.inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm(scope.row)">
                </el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
              </template>
            </el-table-column>
            <!-- 索引列 -->
            <el-table-column type='index' label='#'></el-table-column>
            <el-table-column prop="attr_name" label="参数名称" width="500">
            </el-table-column>
            <el-table-column>
              <template>
                <el-table-column label="操作">
                  <el-button class="el-icon-edit" type='primary' size='mini'>修改</el-button>
                  <el-button class="el-icon-delete" type='danger' size='mini'>删除</el-button>
                </el-table-column>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="静态属性" name="only">
          <el-button type='primary' :disabled='isDisable' style='marginBottom:20px' @click='dialogVisible = true'>添加属性</el-button>
        </el-tab-pane>
      </el-tabs>

      <!-- 点击添加按钮弹框 -->
      <el-dialog :title="'添加'+ addName" :visible.sync="dialogVisible" width="60%">
        <el-form v-model='addFromParams'>
          <el-form-item label='参数名'>
            <el-input v-model='addFromParams.attr_name'></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addDtParams">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'params',
  data() {
    return {
      // 存放级联数据
      categoryList: [],
      // 选中的级联选项id
      selectedIds: [],
      props: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children',
        // 悬浮触发
        expandTrigger: 'hover',
        checkStrictly: true,
      },
      // 默认tab页的选中项
      activeName: 'many',
      // 选中的级联项id
      paramId: '',
      // 存放动态参数
      manyData: [],
      // 存放静态属性
      onlyData: [],
      dialogVisible: false,
      // 添加动态参数表单数据
      addFromParams: {
        attr_name: '',
      },
    }
  },
  methods: {
    // 获取商品分类数据
    async getCategoryList() {
      const { data } = await this.$http.get('categories', {
        params: {
          type: 3,
          pagenum: 1,
          pagesize: 100,
        },
      })
      this.categoryList = data.data.result
    },
    // 级联改变触发的事件
    handleChange() {
      this.getParamsById()
    },
    // 切换tab触发的事件
    handleClick() {
      this.getParamsById()
    },
    async getParamsById() {
      // 如果选中的不是第三个级别 就将id数组置空
      if (this.selectedIds.length < 3) {
        this.selectedIds = []
        return
      } else {
        // 证明选中的是第三级
        this.paramsId = this.selectedIds[this.selectedIds.length - 1]
        // 发起请求
        const { data } = await this.$http.get(`categories/${this.paramsId}/attributes`, {
          params: {
            sel: this.activeName,
          },
        })
        // 对获取到的数据进行二次处理
        data.data.forEach((item) => {
          // 为每一行数据添加独有的属性
          item.inputVisible = false
          item.inputValue = ''
          // 得到的数据: '49吋4K超薄曲面 人工智能,55吋4K观影曲面 30核HDR,55吋4K超薄曲面'
          item.attr_vals = item.attr_vals.split(' ')
          // 处理完后的数据: ['49吋4K超薄曲面', '人工智能,55吋4K观影曲面', '30核HDR,55吋4K超薄曲面']
        })
        // 动态参数的数据
        if (this.activeName == 'many') {
          this.manyData = data.data
        } else {
          // 静态属性的数据
          this.onlyData = data.data
        }
      }
    },
    async addDtParams() {
      // 分类id
      await this.$http.post(`categories/${this.paramsId}/attributes`, {
        attr_name: this.addFromParams.attr_name,
        attr_sel: this.activeName,
      })
      // 重新刷新页面
      this.getParamsById()
      this.dialogVisible = false
    },
    // 按下回车或者失去焦点 => 发请求添加参数
    async handleInputConfirm(row) {
      row.inputVisible = false
      // 如果用户输入的是空格
      if (row.inputValue.trim().length === 0) {
        row.inputValue = ''
        return
      }
      // 证明用户输入了有效内容 => 发请求
      // 将用户输入的内容追加到attr_vals数组中
      row.attr_vals.push(row.inputValue)
      // ['红色,绿色','白色','黑色'] => 红色,绿色 白色 黑色 
      
      await this.$http.put(`categories/${this.paramsId}/attributes/${row.attr_id}`, {
        attr_name: row.attr_name,
        attr_sel: this.activeName,
        attr_vals: row.attr_vals.join(' ')
      })
    },
    // 点击按钮让input框展示
    showInput(row) {
      row.inputVisible = true
      row.inputValue = ''
      // 输入框一展示 立刻获取到焦点
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
  },
  computed: {
    // 当选中级联第三级时 让按钮能够使用
    isDisable() {
      return this.selectedIds.length == 3 ? false : true
    },
    addName() {
      return this.activeName === 'many' ? '动态参数' : '静态属性'
    },
  },
  created() {
    this.getCategoryList()
  },
}
</script>

<style lang="less">
.el-breadcrumb {
  margin-bottom: 20px;
}
.selectCategory {
  margin: 20px 0;
}
.el-cascader-panel .el-radio {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 0px;
  right: 10px;
}
.el-cascader-node__label {
  width: 157px;
}
.el-cascader-panel .el-radio__input {
  visibility: hidden;
}
.el-cascader-panel .el-cascader-node__postfix {
  top: 10px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.el-tag:first-child {
  margin-left: 46px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>